<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>

<body>
        <script src="{{url_for('static',filename='js/jquery-3.6.1.js')}}" type="text/javascript" charset="utf-8"></script>
       <script>
       var newData
       var int = setInterval(function () {  //设置定时器
            for (var i in newData){
                if(newData[i]=="green"){
                    if(i=="status1") window.location.href='{{url_for('FirstFage')}}';

                }
            }

       },1000*60*10)
                $(function () {
                    var int = setInterval(function () {  //设置定时器

                       $.ajax(
                           {
                               url:"/checkstatusdata", //从setData函数中获取数据
                               type:"get",
                               dateType:'json',
                                success:function(ret){
                                    newData = JSON.stringify(ret);
                                    newData = eval("("+newData+")");
                                    //console.log(newData["COM1"])
                                    for (var i in newData){
                                            console.log(newData[i])
                                            console.log(i)

                                            var x=document.getElementById(i);
                                            x.setAttribute("style","width:50px;height:50px;border-radius: 50%;box-shadow: none;background:"+newData[i]);
                                            }

                                }

                           }
                       )
                    },500)
                })
    </script>
    <img src="{{url_for('static',filename='img/sign3.png')}}" />
    <div class="title">
        欢迎进入在线腐蚀监测系统
    </div>
    <div class="continer">
    <div class="btn">
        <div class="heng">
            <div>
            <input type="button" value="FSM" onclick="" style="width:50px;height:50px;border-radius: 50%;box-shadow: none;background: none;" id="status6">
            <input type="button" value="场指纹腐蚀监测 " class="btn1" onclick="">
            </div>
        </div>
        <div class="heng">
            <div>
            <input type="button" value="CS" onclick="" style="width:50px;height:50px;border-radius: 50%;box-shadow: none;background: none;" id="status5">
            <input type="button" value="超声波腐蚀监测 " class="btn1" onclick="">
            </div>
        </div>
        <div class="heng">
            <div>
            <input type="button" value="XXJH" onclick="" style="width:50px;height:50px;border-radius: 50%;box-shadow: none;background: none;" id="status4">
            <input type="button" value="线性极化腐蚀监测" class="btn1" onclick="">
            </div>
        </div>
        <div class="heng">
            <div>
            <input type="button" value="DG" onclick="" style="width:50px;height:50px;border-radius: 50%;box-shadow: none;background: none;" id="status3">
            <input type="button" value="电感腐蚀监测  " class="btn1" onclick="">
            </div>
        </div>
        <div class="heng">
            <div>
            <input type="button" value="CP" onclick="" style="width:50px;height:50px;border-radius: 50%;box-shadow: none;background: none;" id="status2">
            <input type="button" value="阴极保护腐蚀监测" class="btn1" onclick="">
            </div>
        </div>
        <div class="heng">
            <div>
            <input type="button" value="CM" onclick="" style="width:50px;height:50px;border-radius: 50%;box-shadow: none;background: none;" id="status1">
            <input type="button" value="局部腐蚀监测" class="btn1" onclick="window.location.href='{{url_for('FirstFage')}}'">
            </div>
        </div>
    </div>
    </div>
    <div class="back1">
        宁波科金工业腐蚀监测技术有限公司
    </div>
    <div class="back2">
        Ningbo Kejin Industry Corrosion Monitoring Technology Ltd.
    </div>
</body>
<style>
    .btnx {
        width: 50px;
        height: 50px;
        color: black;
        border-radius: 50%;
        box-shadow: none;
        background: none;
    }
    
    .title {
        line-height: 180px;
        text-align: center;
        font-size: 50px;
    }

    .continer{
        width:105%;
        display: flex;
        //flex-direction: column;
        justify-content: center;
    }

    .btn {
        display: flex;
        flex-direction: column-reverse;
        //flex-direction: column;
        width:450px;
    }
    
    .btn1 {
        font-size: 45px;
        border: none;
        box-shadow: none;
        background: none;
    }
    
    .heng {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        //float:left;
        //width:50%;
        //align-items:center;
    }
    
    .back1 {
        position: relative;
        top: 250px;
        font-size: 25px;
        text-align: center;
    }
    
    .back2 {
        top: 255px;
        position: relative;
        font-size: 25px;
        text-align: center;
    }
</style>

</html>